<template>
  <el-dialog title="标签打印" v-model="deleteVisible" width="600" align-center class="Vdialog" @close="cancel"
    :close-on-click-modal="false">
    <template #header>
    </template>
    <div class="content">
      <div>
        <vxe-table ref="tableRef" :data="tableData" :round="true" border height="400" @checkbox-all="selectAllChangeEvent"
          @checkbox-change="selectChangeEvent">
          <vxe-column type="checkbox" width="80"></vxe-column>
          <vxe-column field="label" title="标签名称"></vxe-column>
          <vxe-column field="create_time" title="份数">
            <template #default="{ row }">
              <el-input v-model="row.number" placeholder="数量"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="content" title="打印">
            <template #default="{ row }">
              <el-button type="primary" link>打印</el-button>
              <el-button type="primary" link>下载</el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button type="" @click="cancel">关闭</el-button>
        <el-button type="primary" @click="batchPrinting">批量打印</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VLog">
import { reactive, toRefs } from 'vue'
const emits = defineEmits(['cancel'])
const props = defineProps({

})
const data = reactive({
  deleteVisible: false,
  tableData: [
    {
      label: '环保回收标',
      number: ''
    }
  ],
  ids: 0
})
const { deleteVisible, tableData } = toRefs(data)
const open = () => {
  deleteVisible.value = true
}
const cancel = () => {
  deleteVisible.value = false
  emits('cancel')
}

const tableRef = ref()
const selectAllChangeEvent = ({ checked }) => {
  const $table = tableRef.value
  if ($table) {
    const records = $table.getCheckboxRecords()
  }
}
const selectChangeEvent = ({ checked }) => {
  const $table = tableRef.value
  if ($table) {
    const records = $table.getCheckboxRecords()
  }
}
const batchPrinting = () => {
  const $table = tableRef.value
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    console.log(selectRecords)
  }
}

defineExpose({
  open, data, cancel
})
</script>
<style lang="scss" scoped>
.content {
  align-items: center;
  margin: 20px;
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}

.dialog-button {
  text-align: center !important;
}
</style>